<template>
	<view class="content">
		<view class="phone" style="margin-top: 69rpx;">
			<input class="inputPhone" type="text" :password="showPassword"  placeholder="请设置登录密码" placeholder-class="phonePlaceSytle" v-model="secret" maxlength="16" />
			<uni-icons style="margin-right: 30rpx;" v-show="showPassword" type="eye" size="20" @click="changePassword"></uni-icons>
			<uni-icons style="margin-right: 30rpx;" v-show="!showPassword" type="eye-slash" size="20" @click="changePassword"></uni-icons>
			<image v-if="secret" :src="staticUrl + '/image/icon_clear.png'" mode="widthFix" @click="clearInput()"></image>
		</view>
		<view class="phone" style="margin-top: 20rpx;">
			<input class="inputPhone" type="text" :password="showPassword2"  placeholder="请再次输入登录密码" placeholder-class="phonePlaceSytle" v-model="onceScret" maxlength="16"/>
			<uni-icons style="margin-right: 30rpx;" v-show="showPassword2" type="eye" size="20" @click="changePassword2"></uni-icons>
			<uni-icons style="margin-right: 30rpx;" v-show="!showPassword2" type="eye-slash" size="20" @click="changePassword2"></uni-icons>
			<image v-if="onceScret" :src="staticUrl + '/image/icon_clear.png'" @click="clearInput2()"></image>
		</view>
		<!-- 提示文字 -->
		<view class="hint">密码长度为8~16位</text></view>
		<view class="loginBtn content" @click="commit()"><text>确定</text></view>
	</view>
</template>

<script>
const app = getApp();
import * as api from '@/api/login';
export default {
	data() {
		return {
			staticUrl: this.$config.StaticUrl,
			secret: '',
			onceScret: '',
			showPassword: true,
			showPassword2: true
		};
	},
	onLoad() {
	},
	methods: {
		changePassword(){
			this.showPassword = !this.showPassword
		},
		changePassword2(){
			this.showPassword2 = !this.showPassword2
		},
		commit(){
			if (this.secret.trim().length <= 0) {
				this.$toast('密码不能为空')
				return;
			} else if (this.secret.trim().length < 8 || this.secret.trim().length > 16) {
				this.$toast('密码格式错误')
				return;
			} else if(this.secret !== this.onceScret) {
				this.$toast('两次密码不一致,请重新输入')
				return;
			}
			this.setLoginSecret();
		},
		setLoginSecret() {
			let that = this
			let userId = this.$store.state.userInfo.currentUser.userId;
			let data = {
				userId: userId,
				action: '',
				params: this.secret
			};
			api.setLoginSecret(data).then(function(res) {
					console.log('setLoginSecret::', res);
					if (res.data.success) {
						that.$toast('密码设置成功')
						let t = setTimeout(()=>{
							clearTimeout(t)
							uni.navigateBack({
								delta:1
							})
						},1000)
					}
				}).catch(function(error) {
					console.log('getUserInfo fail', error);
			});
		},
		clearInput() {
			this.secret = ''
		},
		clearInput2(){
			this.onceScret = ''
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.phone {
	width: 700rpx;
	height: 122rpx;
	background-color: #ffffff;
	border-radius: 15px;
	display: flex;
	align-items: center;
	position: relative;
}

.phone image {
	position: absolute;
	width: 35rpx;
	height: 35rpx;
	right: 100rpx;
}
.inputPhone {
	margin-left: 45rpx;
	width: 600rpx;
	height: 100%;
}

.phonePlaceSytle {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}

.getCode {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #0659c7;
	position: absolute;
	right: 18px;
}
.hint {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #666;
	height: 20px;
	width: 80%;
	margin-top: 20rpx;
}
.loginBtn {
	width: 700rpx;
	height: 100rpx;
	border-radius: 50px;
	background-color: #0659c7;
	margin-top: 80rpx;
}
.loginBtn:active {
	background-color: #007aff;
}
.loginBtn text {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #ffffff;
}
</style>
